import React, { Component } from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { Icon } from 'antd-mobile';

// 引css
import "./shop.css"
// 引actions以及导出的方法
import { actions, getCartlist,getTag,getOnetag,getAllprice } from "../../store/modules/shop"
class Shop extends Component {
    render() {
        let { cartlist,tag,allprice, shop: { reqCartdelete, reqCartadd,allcheck,check, } } = this.props
        return (
            <div className="pad">
                <ul className="shop_nav">
                    <li>
                        全部(20)
                        <span></span>
                    </li>
                    <li>
                        降价(4)
                        <span></span>
                    </li>
                    <li>
                        常卖(2)
                        <span></span>
                    </li>
                    <li>
                        分类
                        <span></span>
                    </li>
                </ul>
                <div className="shop_content">
                    <div>
                        {
                            cartlist[1] ? cartlist[1].content.map((item,index) => (
                                <div key={item.id}>
                                    <input type="checkbox" checked={item.tag} onChange={()=>check(index,!item.tag)} />
                                    <img src={item.img} alt="" />
                                    <ul>
                                        <li>{item.goodsname}</li>
                                        <li className="clearfix">
                                            <div className="fl">
                                                <span>￥{item.price}</span>
                                                <span>￥1099</span>
                                            </div>
                                            <div className="fr">
                                                <div className="fl">-</div>
                                                <i className="fl">{item.num}</i>
                                                <div className="fl" onClick={() => reqCartadd(item.goodsid)}>+</div>
                                            </div>
                                        </li>
                                        <li>
                                            <button onClick={() => reqCartdelete(item.id)}>删除</button>
                                        </li>
                                    </ul>
                                </div>
                            )) : null
                        }
                    </div>
                </div>
                <div className="bottom1 clearfix">
                    <div className="fl">
                        <input type="checkbox" onChange={()=>allcheck(!tag)} checked={tag} />
                        <span>全选</span>
                    </div>
                    <ul className="fr clearfix">
                        <li className="fr">
                            <input type="button" value="结算" />
                        </li>
                        <li className="fr">
                            <p>￥{allprice.toFixed(2)}</p>
                            <p>已优惠￥200元</p>
                        </li>
                        <li className="fr">
                            <p>合计</p>
                            <p>已免运费</p>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
    componentDidMount() {
        let { reqCartlist } = this.props.shop
        reqCartlist()
    }
}



let mapStateToProps = (state) => ({
    cartlist: getCartlist(state),
    tag: getTag(state),
    onetag: getOnetag(state),
    allprice: getAllprice(state),
});
let mapDispatchToProps = (dispatch) => ({
    shop: bindActionCreators(actions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Shop)